<script setup lang="ts">
import type { ToastInst } from 'nutui-uniapp'
import coupon from '@/components/basic-template/coupon.vue' // 引入优惠券组件

const toastRef = ref<ToastInst>()
// 优惠券活动弹窗相关
const popupVisible = ref(false)
const activityCoupons = ref<any>([])
// 显示优惠券活动弹窗
function showCouponPopup(data: any) {
  if (data && data.length > 0) {
    activityCoupons.value = data
    popupVisible.value = true
  }
}

// 关闭优惠券弹窗
function closePopup() {
  popupVisible.value = false
}

defineExpose({
  showCouponPopup,
})
</script>

<template>
  <div>
    <!-- 优惠券活动弹窗 -->
    <nut-popup
      v-model:visible="popupVisible"
      :round="true"
      :custom-style="{ width: '680rpx', backgroundColor: '#f5f5f5', borderRadius: '12rpx' }"
      class="coupon-activity-popup"
    >
      <div class="popup-container">
        <div class="popup-title">
          赠券活动
        </div>
        <div class="popup-content">
          <coupon
            v-for="(item, index) in activityCoupons"
            :key="index"
            :res="item"
            relative
          />
        </div>
        <div class="popup-footer">
          <div class="close-btn" @click="closePopup">
            关闭
          </div>
        </div>
      </div>
    </nut-popup>

    <nut-toast ref="toastRef" cover />
  </div>
</template>

<style scoped lang="scss">
/* 弹窗样式 */
.popup-container {
  width: 670rpx;
}

// 确保弹窗宽度为屏幕的90%
:deep(.nut-popup) {
  width: 100% !important;
}

// 给弹窗添加特定的类，提高样式优先级
.coupon-activity-popup {
  width: 100% !important;
  max-width: 90vw !important;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  margin: 20rpx 0 30rpx;
  color: #333;
}

.popup-content {
  max-height: 70vh;
  overflow-y: auto;
  // padding: 0 10rpx;
}

.popup-footer {
  display: flex;
  justify-content: center;
  margin: 30rpx 0 20rpx;
}

.close-btn {
  border: 1px solid #ddd;
  color: #666;
  font-size: 28rpx;
  padding: 15rpx 60rpx;
  border-radius: 40rpx;
  text-align: center;
  background: #fff;
}

// 修复优惠券组件在弹窗中的样式
:deep(.coupon-container) {
  margin: 16rpx 0;
}
</style>
